import {getToken} from '../../utils/auto.js'
import {getBase64} from '../../utils/file.js'
import commonConfig from '../../utils/common.js'
import rulesM from '../../utils/rules.js'

export default {
    name: 'dhForm',
    data() {
        return {
            // formData: {},
            rules: {},
            upload: {
                // 设置上传的请求头部
                headers: {Authorization: "Bearer " + getToken()},
                // 上传的地址
                url: commonConfig.baseUrl + "/system/user/importData"
            },
        }
    },
    props: {
        formData: Object,
        formDetail: Object,
        name:String,
        age:Number
    },
    methods: {
        querySearchAsync(queryString, cb, me) {
            if (me && me.getList) {
                let link = me.getList(queryString)
                cb(link)
            } else {
                cb([])
            }
        },

        handleSelect(item, me) {
            if (me && me.select) {
                me.select(item)
            }

        },

        initData() {
            this.formDetail.formArray.forEach((item, index) => {
                if (item.rules) {
                    let rule = [];
                    item.rules.forEach((rulesItem) => {
                        let ruleItem = rulesM[rulesItem.type](rulesItem)
                        rule.push(ruleItem)
                    })
                    this.rules[item.basicInfo.name] = rule
                }
            })

        },

        createReqRule(ruleItem) {
            return {
                required: true,
                msg: ruleItem.msg || '请输入',
                trigger: ruleItem.tri || 'blur'
            }
        },

        controlChange(e, c) {
            // this.verificationForm()
            if (c && c.change) {
                c.change(e)
            }
        },

        getDateFormat(type) {
            switch (type) {
                case 'week':
                    return '[第] ww [周]'
                case 'month':
                    return 'YYYY-MM'
                case 'year':
                    return 'YYYY [年]'
                default:
                    return 'YYYY-MM-DD'
            }
        },

        beforePicUpload(a, b) {
            return true
        },

        changePicUpload(file, name) {
            if (file.raw.type.indexOf('image') === -1) {
                this.$message({
                    message: '请上传图片',
                    type: 'warning',
                })
                return false
            }
            getBase64(file.raw).then((res) => {
                let imageO = {
                    image: res,
                    name: file.name,
                    file: file
                }
                this.formData[name] = imageO
            })
        },

        changePicMultipleUpload(file, name) {
            if (file.raw.type.indexOf('image') === -1) {
                this.$message({
                    message: '请上传图片',
                    type: 'warning',
                })
                return false
            }

            getBase64(file.raw).then((res) => {
                let imageO = {
                    image: res,
                    name: file.name,
                    file: file
                }
                if (this.formData[name]) {
                    this.formData[name].push(imageO)
                } else {
                    this.formData[name] = [imageO]
                }
            })
        },

        handlePicSuccess(response, file, fileList) {
            // formData.value.qcDoctor.push(response)
        },

        delPic(cell, index) {
            cell.splice(index, 1)
        },

        getImageView(cell, index) {
            let cellN = cell.slice(index, cell.length)
            for (let i = 0; i < index; i++) {
                cellN.push(cell[i])
            }
            cellN = cellN.map(item => item.image)
            return cellN
        },

        changeFormDataItem(key, value) {
            this.formData[key] = value
        },

        reset() {
            this.$refs.formRef.resetFields()
        },

        verificationForm() {
            this.$refs.formRef.validate((valid, fields) => {
                return valid
            })
        },

        defaultClick(){
            // this.$emit('defaultClick')
        }
    },
    mounted() {
        this.initData()
    },

    template: `
        <div>
            <el-form :model="formData" ref="formRef" :validate-on-rule-change="false"
                :label-position="formDetail.formLayout && formDetail.formLayout.labelPosition ? formDetail.formLayout.labelPosition:'right'"
                :label-width="formDetail.formLayout && formDetail.formLayout.labelWidth?formDetail.formLayout.labelWidth:'80px'" 
                :size="formDetail.formLayout && formDetail.formLayout.size?formDetail.formLayout.size:'default'"
                :rules="rules">
                <el-row :gutter="20">
                    <el-col v-for="(widgetItem,index) in formDetail.formArray"
                        v-show="!(widgetItem.operation && widgetItem.operation.hide)"  :xs="12"
                        :sm="12"
                        :md="12"
                        :lg="8"
                        :xl="6">
                        <el-form-item :label="widgetItem.basicInfo && widgetItem.basicInfo.label?widgetItem.basicInfo.label:''"
                            :label-width="widgetItem.layoutSet && widgetItem.layoutSet.labelWidth?widgetItem.layoutSet.labelWidth:''"
                            :prop="widgetItem.basicInfo.name">
                            <el-input v-if="widgetItem.type==='input' || !widgetItem.type"
                                v-model="formData[widgetItem.basicInfo.name]"
                                :placeholder="widgetItem.basicInfo.placeholder || ''"
                                :type="widgetItem.basicInfo.type || 'text'"
                                :maxlength="widgetItem.basicInfo.maxlength"
                                :minlength="widgetItem.basicInfo.minlength"
                                :disabled="widgetItem.operation && widgetItem.operation.disabled"
                                :clearable="widgetItem.operation && widgetItem.operation.clearable"
                                :readonly="widgetItem.operation && widgetItem.operation.readonly"
                                :show-word-limit="widgetItem.operation && widgetItem.operation.showWordLimit"
                                @change="(e)=>controlChange(e,widgetItem.command)"
                                
                            ></el-input>
                            
                            <el-autocomplete v-else-if="widgetItem.type==='autocomplete'"
                                v-model="formData[widgetItem.basicInfo.name]"
                                :value-key="widgetItem.basicInfo.valueKey || 'value'"
                                :fetch-suggestions="(a,b)=>querySearchAsync(a,b,widgetItem.command)"
                                :placeholder="widgetItem.basicInfo.placeholder || ''"
                                @select="(item)=>handleSelect(item,command)"
                                :disabled="widgetItem.operation && widgetItem.operation.disabled"
                                :clearable="widgetItem.operation && widgetItem.operation.clearable"
                                :readonly="widgetItem.operation && widgetItem.operation.readonly"
                                style="width: 100%"
                             />
                            
                            <el-input-number v-else-if="widgetItem.type==='input-num'" v-model="formData[widgetItem.basicInfo.name]"
                                :class="{ input_num_left:widgetItem.operation && widgetItem.operation.controls === false }"
                                :precision="widgetItem.basicInfo.precision"
                                :step="widgetItem.basicInfo.step"
                                :max="widgetItem.basicInfo.max" 
                                :min="widgetItem.basicInfo.min" 
                                :step-strictly="widgetItem.basicInfo.stepStrictly"
                                :readonly="widgetItem.operation && widgetItem.operation.readonly"
                                :disabled="widgetItem.operation && widgetItem.operation.disabled"
                                :controls="widgetItem.operation && widgetItem.operation.controls === false ? false:true"
                                style="width: 100%"/>

                            <el-select v-else-if="widgetItem.type === 'select'" v-model="formData[widgetItem.basicInfo.name]"
                                :placeholder="widgetItem.basicInfo.placeholder || ''"
                                :disabled="widgetItem.operation && widgetItem.operation.disabled"
                                :clearable="widgetItem.operation && widgetItem.operation.clearable"
                                :multiple="widgetItem.operation && widgetItem.operation.multiple"
                                :filterable="widgetItem.operation && widgetItem.operation.filterable"
                                :allow-create="widgetItem.operation && widgetItem.operation.allowCreate"
                                @change="(e)=>controlChange(e,widgetItem.command)"
                                style="width: 100%">
                                <el-option
                                    v-for="(item,index) in widgetItem.operationInfo.options"
                                    :key="widgetItem.operationInfo.key?item[widgetItem.operationInfo.key]:index"
                                    :label="item[widgetItem.operationInfo.label?widgetItem.operationInfo.label:label]"
                                    :value="item[widgetItem.operationInfo.value?widgetItem.operationInfo.value:value]"
                                    :disable="widgetItem.operationInfo.disabled?item[widgetItem.operationInfo.disabled]:false"
                                />
                            </el-select>
                            
                            <el-cascader style="width: 100%" v-else-if="widgetItem.type === 'cascader'"
                                v-model="formData[widgetItem.basicInfo.name]" :options="widgetItem.operationInfo.options"
                                :placeholder="widgetItem.basicInfo.placeholder || ''"
                                :props="widgetItem.operationInfo.props" 
                                :disabled="widgetItem.operation && widgetItem.operation.disabled"
                                :clearable="widgetItem.operation && widgetItem.operation.clearable"
                                :filterable="widgetItem.operation && widgetItem.operation.filterable"
                                :show-all-levels="widgetItem.operation && widgetItem.operation.showAllLevels"
                                @change="(e)=>controlChange(e,widgetItem.command)"
                            />
                            
                            <el-tree-select style="width: 100%" v-else-if="widgetItem.type === 'tree-select'"
                                v-model="formData[widgetItem.basicInfo.name]"
                                :props="widgetItem.operationInfo.props" 
                                :data="widgetItem.operationInfo.options" :render-after-expand="false" 
                                :disabled="widgetItem.operation && widgetItem.operation.disabled"
                                :clearable="widgetItem.operation && widgetItem.operation.clearable"
                                :filterable="widgetItem.operation && widgetItem.operation.filterable"  
                                :multiple="widgetItem.operation && widgetItem.operation.multiple"  
                            />
                            
                            <el-date-picker
                                v-else-if="widgetItem.type==='date'"
                                unlink-panels
                                v-model="formData[widgetItem.basicInfo.name]"
                                :type="widgetItem.basicInfo.type || 'date'"
                                :placeholder="widgetItem.basicInfo.placeholder || ''"
                                :disabled="widgetItem.operation && widgetItem.operation.disabled"
                                :clearable="widgetItem.operation && widgetItem.operation.clearable"
                                :readonly="widgetItem.operation && widgetItem.operation.readonly"
                                :format="widgetItem.basicInfo.format || getDateFormat(widgetItem.basicInfo.type)"
                                :disabled-date="widgetItem.operation && widgetItem.operation.disabledDate?widgetItem.operation.disabledDate:()=>{}"
                                :value-format="widgetItem.basicInfo.valueFormat || 'YYYY-MM-DD'"
                                :default-time="widgetItem.basicInfo.defaultTime"
                                
                                range-separator="——"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                @change="(e)=>controlChange(e,widgetItem.command)"
                                style="width: 100%"
                            ></el-date-picker>
                            
                            <template v-else-if="widgetItem.type === 'upload-image'">
                                <el-upload
                                    v-if="!widgetItem.basicInfo.max || widgetItem.basicInfo.max===1"
                                    style="width: 150px;height: 100px;"
                                    class="pic-uploader"
                                    :headers="upload.headers"
                                    :action='upload.url'
                                    :show-file-list="false"
                                    :auto-upload="false"
                                    :on-change="(file)=>changePicUpload(file,widgetItem.basicInfo.name)"
                                >
                                    <el-image v-if="formData[widgetItem.basicInfo.name] && formData[widgetItem.basicInfo.name].image" :src="formData[widgetItem.basicInfo.name].image" style="width: 100%;height: 100%" fit="cover" ></el-image>
                                    <el-icon v-else><Plus /></el-icon>
                                </el-upload>
                                <template v-else>
                                    <div class="upl-pic-multiple" v-if="formData[widgetItem.basicInfo.name] && formData[widgetItem.basicInfo.name].length>0" v-for="(imgItem,index) in formData[widgetItem.basicInfo.name]">
                                        <el-image :src="imgItem.image" style="height: 100px"  fit="cover" :preview-src-list="getImageView(formData[widgetItem.basicInfo.name],index) "></el-image>
                                        <el-icon class="upl-pic-del" @click="delPic(formData[widgetItem.basicInfo.name],index)"><Close /></el-icon>
                                    </div>
                                    
                                    <el-upload
                                        v-show="!formData[widgetItem.basicInfo.name] || formData[widgetItem.basicInfo.name].length < widgetItem.basicInfo.max"
                                        style="width: 150px;height: 100px"
                                        class="pic-uploader"
                                        :headers="upload.headers"
                                        :action='upload.url'
                                        :multiple="true"
                                        :show-file-list="false"
                                        :auto-upload="false"
                                        :on-change="(file)=>changePicMultipleUpload(file,widgetItem.basicInfo.name)"
                                    >
                                         <el-icon><Plus /></el-icon>
                                    </el-upload>
                                </template>
                                    
                            </template>
                            
                            <template v-else-if="widgetItem.type === 'slot'">
                                <slot :name="widgetItem.basicInfo.slotName" :form="formData"></slot>
                            </template>
                            
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
            
    `
}
